<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta content="telephone=no" name="format-detection">
	<title>完善资料1/4</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="./css/pefect_info.css">
	<link rel="stylesheet" href="./css/common.css">
	<script src="../../../js/jquery-1.8.3.min.js"></script>
	<!-- 根据额外需求引用fix.js -->
	<script src="./js/fix.js"></script>

	<!-- <script src="js/iscroll.js"></script>
	<script src="js/navbarscroll.js"></script> -->
	<script src="../../../js/mobile.js"></script>
	<script src="js/honeySwitch.js"></script>
	<script type="text/javascript" src="js/ruler.js"></script>
	<link rel="stylesheet" href="./css/ksd.css">

</head>
<style>
	* {
		padding: 0;
		margin: 0;
	}

	a {
		text-decoration: none;
	}

	ul,
	ol {
		list-style: none;
	}

	.box {
		height: 50px;
		position: relative;
		/* width: 75%; */
		margin: 0 auto;
	}

	.wrap {
		min-width: 320px;
		max-width: 768px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}

	.wrapper {
		position: relative;
		height: 49px;
		line-height: 50px;
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		border: 1px solid #ccc;
		/* border-radius: 25px; */
	}

	.wrapper .scroller {
		position: absolute;
		padding: 0 48% 0 50%;
	}

	.wrapper .scroller li {
		float: left;
		width: 50px;
		height: 13px;
		line-height: 13px;
		text-align: center;
		font-style: none;
		margin: 0 20px;
		padding: 30px 0 10px;
		position: relative;
	}

	/*	.wrapper .scroller li:first-child {width:230px;}
	.wrapper .scroller li:last-child {width:210px;}*/
	.wrapper .scroller li span {
		display: block;
		border-left: 1px solid #ccc;
		/*border-right:1px solid #ccc;*/
		width: 100%;
		height: 100%;
	}

	.wrapper .scroller li span i {
		display: inline-block;
		font-size: 12px;
		font-style: normal;
		position: absolute;
		top: 7px;
		left: -10px;
	}

	.pillar {
		display: inline-block;
		width: 6px;
		height: 100%;
		border-radius: 10px;
		background: red;
		position: absolute;
		z-index: 2;
		left: 50%;
		margin-left: -3px;
	}

	h3 {
		text-align: center;
		line-height: 60px
	}
</style>
<script>
	$(function () {
		var hrefarr = typeof window.localStorage.hrefarr !== "undefined" ? window.localStorage.hrefarr.split(",") : [];//判断是否有hrefarr字段
		var prehref = document.referrer;//获取上个页面的全部（包括参数）的地址链接
		if (hrefarr.indexOf(prehref) == -1) {//如果上一个链接为新连接就push到数组去
			hrefarr.push(prehref);
		}
		window.localStorage.hrefarr = hrefarr;//把最新组成的数组存到localstorage
		window.localStorage.setItem('skipBack', hrefarr[0]);//永远把第一个地址给记住并存为skipBack以便之后返回按钮默认跳转至详情页
		$(".backindex").on("click", function () {
			//window.localStorage.removeItem('hrefarr');//清除掉原来的数据
			//window.location.href = window.localStorage.skipBack;//跳转至原页面
			window.history.back();
		});
		var h = $(document).height(); //页面总高度
		var h1 = $(window).height(); //页面显示区域高度
		$(".btn").css("bottom", "3%");
		$(".spinner").css("margin", h / 2 + "px auto");
		var storage = window.localStorage;
		if (storage.length != 0 && storage.person_info != null && Object.keys(JSON.parse(storage.person_info)).length == 5) { //如果缓存满足5项数据
			// $(".loading").removeClass("none");
			window.location.href = "evaluation.html";
		} else { //信息不足需要填写
			$(".show_body").removeClass("none");
			$(".loading").addClass("none");

			//初始化尺子2
			var origin_value = 120;
			var measureRuler2 = new MeasureRuler({
				wrapperId: "rulerWrapper2", //容器ID，页面中写一个DIV就行 (必须)
				max: 250, //刻度尺最大的刻度    (非必须，默认为1000)
				minUnit: 1, //刻度尺最小刻度    (非必须，默认为1)
				unitSet: 10, //刻度尺单元长度    (非必须，默认是10)
				value: 170, //初始化数值       (非必须，默认为1)
				mult: 1, //刻度值倍数，默认是最小刻度值为10px，如果定mult为3则最小刻度为30px (非必须，默认为1)
				callback: rulerSetValue2, //滑动尺子过程中的回调函数     (非必须)
				min: 120
			})

			function rulerSetValue2(val) {
				$(".rval").html(val);
				origin_value = val;
			}
			$(".btn").click(function () {
				var href = window.location.href;
				var search = href.split("?")[1];
				var arr = search.split("&");
				var urlObj = {} // 等价于 var urlObj = new Object()
				var height = $(".rval").text();
				for (var i = 0; i < arr.length; i++) {
					urlObj[arr[i].split("=")[0]] = arr[i].split("=")[1];
				}
				var person = {};
				urlObj.userId;
				person.userId = urlObj.userId;
				person.height = height;
				if ($(".cell-right span").hasClass("switch-off")) {
					person.sex = 1;
				} else {
					person.sex = 0;
				}
				storage.person_info = JSON.stringify(person);
				window.location.href = 'perfect_info2.html'
			});
		}
	});
</script>

<body onselectstart="return false;">
	<div class="show_body none">
		<div class="upcore-navbar">
			<span class="upcore-navbar-icon-left backindex"></span>
			<span class="upcore-navbar-name-span">完善资料1/4</span>
			<br style="clear:both">
		</div>
		<div class="content">
			<h3 class="Regular" style="margin:1.41rem 0 .44rem 0;"> 性别 </h3>
			<div class="common-row">
				<div class="cell-right"><span class="switch-off "></span></div>
			</div>
			<h3 class="Regular" style="margin:1.16rem 0 .22rem 0;"> 身高</h3>

			<div id="box">
				<p class="ruler2"><span class="rval Medium">0</span>CM</p>
				<div id="rulerWrapper2"></div>
			</div>
			<!-- <h3 id="numberID">540</h3>
			<div class="box">
				<span class="pillar"></span>
				<div class="wrapper" id="wrapper1">
					<div class="scroller">
						<ul class="clearfix">
							<li><span><i>100</i></span></li>
							<li><span><i>110</i></span></li>
							<li><span><i>120</i></span></li>
							<li><span><i>130</i></span></li>
							<li><span><i>140</i></span></li>
							<li><span><i>150</i></span></li>
							<li><span><i>160</i></span></li>
							<li><span><i>170</i></span></li>
							<li><span><i>180</i></span></li>
							<li><span><i>190</i></span></li>
							<li><span><i>200</i></span></li>
						</ul>
					</div>
				</div>
			</div>
			
		</div> -->
			<!-- <a class="footer">下一步</a> -->
			<button class="btn">下一步</button>
		</div>
		<div class="loading">
			<div class="spinner">
				<div class="rect1"></div>
				<div class="rect2"></div>
				<div class="rect3"></div>
				<div class="rect4"></div>
				<div class="rect5"></div>
			</div>
		</div>
	</div>
</body>
<!-- <script>
	$(function () {
		//demo示例一到四 通过lass调取，一句可以搞定，用于页面中可能有多个导航的情况
		// $('.wrapper').navbarscroll();

		//demo示例五 通过id调取
		// $('.wrapper').navbarscroll({
		// 	defaultSelect:6,
		// 	endClickScroll:function(obj){
		// 		console.log(obj.text())
		// 	}
		// });

		//demo示例六 通过id调取
		$('.wrapper').navbarscroll({
			duibiScreenWidth: 0.1, //单位以rem为准，默认为0.4rem
			scrollerWidth: 1, //单位以px为准，默认为3,[仅用于特殊情况：外层宽度因为小数点造成的不精准情况]
			fingerClick: 0, //目标第0或1个选项触发,必须每一项长度一致，方可用此项
			endClickScroll: function (obj) {
				// console.log(obj.text())
			}
		});
	});
</script> -->

</html>